<template>
	<view class="info-search">
		<image src="/static/image/know_banner.png" alt="" style="height: 140px;"></image>
		<view class="nav-list">
			<scroll-view scroll-x :scroll-left="scrollLeft">
				<view class="nav-scroll">
					<view :class="[navClass(index)]" v-for="(item,index) in navList" :key="index"
						@click="changeScroll(index)">
						{{item.name}}
						<view class="line"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容 -->
		<swiper :autoplay="false" :current="navCurrent" :skip-hidden-item-layout="true" @change="swiperChange">
			<swiper-item v-for="(item, index) in navList" :key="index">
				<dangerousKnowIndex v-if="item.isInit && item.component=='dangerousKnowIndex'" />
				<policyKnowIndex v-else-if="item.isInit && item.component=='policyKnowIndex'" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 危险品类别
	import dangerousKnowIndex from "./dangerous-know/index.vue"
	// 政策法规
	import policyKnowIndex from "./policy-know/index.vue"

	export default {
		components: {
			dangerousKnowIndex,
			policyKnowIndex
		},
		data() {
			return {
				scrollLeft: 0,
				navCurrent: 0,
				navList: [{
					name: '危险品知识',
					component: 'dangerousKnowIndex',
					isInit: true,
				}, {
					name: '政策法规',
					component: 'policyKnowIndex',
					isInit: false,
				}]
			}
		},
		methods: {
			// 监听点击右上角事件
			onNavigationBarButtonTap(e) {
				if (this.navCurrent === 0) {
					this.$goBack('./dangerous-know/search');
				} else {
					this.$goBack('./policy-know/search');
				}
			},
			changeScroll(index) {
				this.navCurrent = index
				uni.createSelectorQuery().in(this).selectAll('.nav-item').boundingClientRect(list => {
					const {
						left,
						width
					} = list[index];
					let scrollLeft = 0;
					for (var i = 0; i <= index; i++) {
						scrollLeft += list[i].width;
					}
					if (left + width > this.boxWidth) {
						this.$nextTick(() => {
							this.scrollLeft = scrollLeft - this.boxWidth + 10
						})
					} else if (left < 0) {
						this.$nextTick(() => {
							this.scrollLeft = scrollLeft - width - 10
						})
					}
				}).exec()
			},
			swiperChange(event) {
				const index = event.detail.current;
				const navItem = this.navList[index]
				navItem.isInit = true;
				if (this.navCurrent == index) {
					return;
				}
				this.changeScroll(index)
			},
			navClass(index) {
				return ['nav-item', {
					'cur': index == this.navCurrent
				}]
			},
		},
		mounted() {
			uni.createSelectorQuery().in(this).selectAll('.nav-item').boundingClientRect(list => {
				let width = 0
				list.forEach((item, index) => {
					width += item.width;
				})
				this.scrollWidth = width
			}).exec();
			uni.createSelectorQuery().in(this).select('.nav-scroll').boundingClientRect(data => {
				this.boxWidth = data.width
			}).exec();
		}
	}
</script>

<style lang="scss">
	.info-search {
		background: #fff;
	}

	.nav-list {
		height: 90rpx;
		padding-top: 28rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

		.nav-scroll {
			white-space: nowrap;
			padding: 0 12rpx;


			.nav-item {
				display: inline-block;
				font-size: 28rpx;
				color: #333;
				padding: 0 12rpx;
				line-height: 88rpx;

				.line {
					opacity: 0;
					border-radius: 4rpx;
					height: 4rpx;
					background: #007AFF;
					width: 100rpx;
					margin: 0 auto;
					transition: all 0.4s;
				}

				&.cur {
					.line {
						opacity: 1;
					}
				}
			}
		}

	}
</style>
